<template>
  <view class="container">
    <navbar :config="config"></navbar>

    <view class="zdtopbox">
     <!-- <view class="" style="display: flex;">
        <text class="iconfont position-ab u-mt15 u-ml30 u-D1D9D4">&#xe7a6;</text>
        <input placeholder="请输入搜索关键字" @confirm="confirmSubmit" @input="getMsg" class="intoColor"
          placeholder-class="pc" />
        <text style="color: #FFFFFF;font-size: 36rpx; font-weight: 500;margin-left: 20rpx;align-items: center;"
          @click="SearchContent">搜索</text>
      </view> -->
	  <div class="search-box">
	  	<div class="search-wap">
	  		<!-- <text class="iconfont search-icon">&#xe7a6;</text> -->
	  		<image src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/home/search-icon.png" style="width: 32rpx;height: 26rpx; margin-left: 30rpx;">
	  		</image>
	  		<input type="text" class="sput" placeholder-style="color: #474747;font-size: 28rpx"
	  			confirm-type="search" v-model="value" placeholder="请输入搜索关键字" @confirm="confirmSubmit" />
	  	</div>
	  	<div class="word" @click="SearchContent">搜索</div>
	  </div>
    </view>
    <view class="u-plr30 u-mt30">
      <view v-if="recordList.length > 0">
        <view class="u-font34 u-474747 u-flex-center-sb">
          <text>历史记录</text>
          <text class="iconfont u-font34 u-FF721B" @click="delStory">清空历史</text>
        </view>
        <view class="u-flex u-flex-warp">
          <view class="oval u-AAAAAA u-font24" v-for="(item, index) in recordList" @click="goProductList(item)"
            :key="index">{{ item }}</view>
        </view>
      </view>
      <!-- <view class="u-mt40">
					<view class="u-font32 u-1A1A1A u-bold">热门搜索</view>
					<view class="u-flex u-flex-warp">
						<view class="oval u-999 u-font24" v-for="(item,index) in recommendList">{{item.name}}</view>
					</view>
				</view> -->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '商品列表',
          color: '#FFFFFF',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, '#FF721B '],
          statusBarFontColor: '#FFFFFF'
        },
        recordList: [],
        recommendList: [{
            name: '厨房用具'
          },
          {
            name: '厨房用具'
          },
          {
            name: '厨房用具'
          }
        ],
        category_id: null,
        searchMsg: ''
      };
    },
    onLoad(options) {
      this.category_id = options.category_id;
      this.SearchContent();
    },
    onShow() {
      let history = uni.getStorageSync('history')
      if (history) {
        this.recordList = history
      }
    },
    methods: {
      confirmSubmit(e) {
        if (e.detail.value) {
          uni.navigateTo({
            url: './productList?keyword=' + e.detail.value + '&category_id=' + this.category_id
          });
        }
      },
      getMsg(e) {
        this.searchMsg = e.detail.value;
      },
      SearchContent() {
        uni.navigateTo({
          url: './productList?keyword=' + this.searchMsg + '&category_id=' + this.category_id
        });
      },

      //清空
      delStory() {
        uni.showModal({
          title: '提示',
          content: '确定清空历史记录？',
          success: res => {
            if (res.confirm) {
              this.recordList = [];
              uni.removeStorageSync('history');
            }
          }
        });
      },
      //搜索结果页
      goProductList(text) {
        uni.navigateTo({
          url: './productList?keyword=' + text
        });
      }
    }
  };
</script>

<style lang="scss">
  .position-ab {
    position: absolute;
    color: #fff;
  }

  .hx-navbar {
    /deep/ .hx-navbar__content {
      background-color: #FF721B !important;

      .hx_text_overflow {
        color: #fff !important;
      }
    }
  }

  .zdtopbox {
    // background-color: #FF721B;
    // padding: 8rpx 30rpx 30rpx;

    .search-box {
    	// height: 85rpx;
    	// padding: 0 30rpx;
    	width: 100%;
    	display: flex;
    	padding: 8rpx 30rpx 35rpx;
    	background-color: #FF721B;
    
    	// align-items: center;
    	.search-wap {
    		width: 600rpx;
    		height: 60rpx;
    		display: flex;
    		align-items: center;
    		background: #F4F4F4;
    		border: 1rpx solid #F4F4F4;
    		border-radius: 30rpx;
    		position: relative;
    
    		.search-icon {
    			font-size: 36rpx;
    			margin-left: 30rpx;
    			color: #fff;
    		}
    
    		.sput {
    			margin-left: 12rpx;
    			font-size: 28rpx;
    			color: #474747;
    			width: 100%;
    		}
    	}
    
    	.word {
    		font-size: 28rpx;
    		color: #ffffff;
    		margin-left: 24rpx;
    		line-height: 60rpx;
    	}
    }

    .pc {
      font-size: 22rpx;
      color: #fff;
    }
  }

  .oval {
    background-color: #ECECEC;
    padding: 18rpx 38rpx;
    border-radius: 50rpx;
    margin-top: 30rpx;
    margin-right: 22rpx;
  }
</style>
